<template>
  <div class="login_page">
    <div id="app">
    <el-card class="el-card">
      <template #header>面经运营后台</template>
      <el-form ref="form" :rules="rules" :model="formData">
        <el-form-item label="用户名：" prop="name">
          <el-input placeholder="请输入用户名" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="pwd">
          <el-input placeholder="请输入密码" v-model="formData.pwd"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        </el-form>
    </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data() {
      return {
        formData: {
          name:'',
          pwd:''
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
      }
    }
  },
  methods: {
    login() {
      this.$refs.form.validate(async(valid) => {
        // console.log(valid)
        if (!valid) {
          return
        }else{
     
          // 验证通过，发请求
          console.log('发请求');

          const res=await loginAPI({username:this.fromDate.name,password:this.fromDate.password});
          console.log(res)

          }
        })
    },
    // 重置
    reset (){
      // 1.
      // this.formData=''
      // 2.
      this.$refs.form.resetFields()
    }
  }
};
</script>

<style lang="scss" scoped>
.login_page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.el-card{
  width: 420px;
  margin: 0 auto;
  //::v-deep 深度作用选择器
  ::v-deep .el-card__header{
    background: rgba(114, 124, 245, 1);
    color:#fff;
    text-align:center;
  }
}
.btn{
  text-align: center;
}
</style>
